<template>
  <div class="video-container">
    <video-player
      class="video-player"
      :options="videoOptions"
    ></video-player>
  </div>
</template>

<script>
export default {
  props:['videoUrl'],
  data() {
    return {
      videoOptions: {
        autoplay: false,
        controls: true,
        responsive: true,
        fluid: true,
        aspectRatio: '16:9', // 设置宽高比,
        // 核心部分：设置网络视频源
        sources: [
          {
            // 替换成你的网络视频真实 URL
            src: this.videoUrl,
            type: 'video/mp4' // 视频类型，根据实际文件类型填写
          }
        ],
      }
    };
  }
};
</script>

<style>
.video-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
</style>
